<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="flex align-center">
				<text class="f28 ml20">当前题库：</text>
				<view class="flex align-center" @click="l.to('/pages/questionBank')">
					<text class="f34 text-black">小车</text>
					<span class="cuIcon-right"></span>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class=" flex justify-around margin-top-sm margin-lr-sm">
				<text class="f30 ww25 flex justify-center" @click="click(1)" :class="c == 1 ? 'style' : ''">科一</text>
				<text class="f30 ww25 flex justify-center" @click="click(2)" :class="c == 2 ? 'style' : ''">科二</text>
				<text class="f30 ww25 flex justify-center" @click="click(3)" :class="c == 3 ? 'style' : ''">科三</text>
				<text class="f30 ww25 flex justify-center" @click="click(4)" :class="c == 4 ? 'style' : ''">科四</text>
			</view>
			<block v-if="c == 1">
				<view class="padding-sm">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_005.png" mode="aspectFill" class="w706 h240 r20 "></image>
				</view>
				<view class="padding-lr-sm flex justify-between">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_001.png" mode="aspectFill" class="w340 h190 r20 " @click="l.to('/pages/subjectOne')"></image>
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_002.png" mode="aspectFill" class="w340 h190 r20 "></image>
				</view>
				<view class="flex flex-wrap justify-around padding-lr">
					<view class="flex flex-direction ww33 align-center mt40" v-for="(item, index) in branchOne" :key="index">
						<image :src="item.url" mode="aspectFill" class="w80 h80 r20 "></image>
						<text class="f26 text-black mt20">{{ item.name }}</text>
					</view>
				</view>
			</block>
			<block v-if="c == 2">
				<view class="padding-sm">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner@2x.png" mode="aspectFill" class="w706 h240 r20 "></image>
				</view>

				<view class="flex flex-wrap justify-around padding-lr">
					<view class="flex flex-direction ww25 align-center mt40" v-for="(item, index) in branchTwo" :key="index">
						<image :src="item.url" mode="aspectFill" class="w80 h80 r20 "></image>
						<text class="f26 text-black mt20">{{ item.name }}</text>
					</view>
				</view>
			</block>
			<block v-if="c == 3">
				<view class="padding-sm">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/asdf.png" mode="aspectFill" class="w706 h240 r20 "></image>
				</view>

				<view class="flex flex-wrap justify-around padding-lr">
					<view class="flex flex-direction ww25 align-center mt40" v-for="(item, index) in branchThree" :key="index">
						<image :src="item.url" mode="aspectFill" class="w80 h80 r20 "></image>
						<text class="f26 text-black mt20">{{ item.name }}</text>
					</view>
				</view>
			</block>
			<block v-if="c == 4">
				<view class="padding-sm">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner@2x.png" mode="aspectFill" class="w706 h240 r20 "></image>
				</view>

				<view class="flex flex-wrap justify-around padding-lr">
					<view class="flex flex-direction ww33 align-center mt40" v-for="(item, index) in branchFour" :key="index">
						<image :src="item.url" mode="aspectFill" class="w80 h80 r20 "></image>
						<text class="f26 text-black mt20">{{ item.name }}</text>
					</view>
				</view>
			</block>
			<view class="flex justify-center align-center mt80">
				<view class="w230 h2 bg-gray"></view>
				<text class="f28 text-bold margin-lr">驾校指南</text>
				<view class="w230 h2 bg-gray"></view>
			</view>
			<view v-for="(item, index) in 5" :key="index">
				<view class="flex padding-lr padding-tb-sm justify-between">
					<view class="flex flex-direction justify-between">
						<text class="f28 text-black text-bold">A1精品班</text>
						<text class="f24 text-gray">2021-03-08 15:01</text>
					</view>
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_003.png" mode="aspectFill" class="w261 h161  r20"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			branchOne: [
				{ name: 'VIP课程', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_0010.png' },
				{ name: '图标技巧', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_009.png' },
				{ name: '错题收藏', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_007.png' },
				{ name: '精简500题', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_004.png' },
				{ name: '考前密卷', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_008.png' },
				{ name: '必看视频', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_006.png' },
			],
			branchTwo: [
				{ name: '考试规则', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksgz@2x.png' },
				{ name: '考试要点', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksyd@2x.png' },
				{ name: '考试标准', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksbz@2x.png' },
				{ name: '考试流程', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/kslc@2x.png' },
			],
			branchThree: [
				{ name: '考试规则', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksgz@2x.png' },
				{ name: '考试要点', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksyd@2x.png' },
				{ name: '考试标准', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ksbz@2x.png' },
				{ name: '考试流程', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/kslc@2x.png' },
			],
			branchFour: [
				{ name: 'VIP课程', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_0010.png' },
				{ name: '图标技巧', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_009.png' },
				{ name: '错题收藏', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_007.png' },
				{ name: '精简500题', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_004.png' },
				{ name: '考前密卷', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_008.png' },
				{ name: '必看视频', url: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx_006.png' },
			],
			c: 1,
		};
	},
	onShow() {},
	methods: {
		click(e) {
			this.c = e;
		},
		async spin(){
			 
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.style {
		color: 000000;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.style::after {
		content: '';
		display: block;
		width: 30rpx;
		height: 6rpx;
		background: #fbb03b;
		border-radius: 3rpx;
		margin-top: 30rpx;
	}
	
}
</style>
